<div class="root">
    <nav-bar :title="addrTitle"></nav-bar>

    <div class="addr-list">
        <div class="addr-item">
            <div class="addr-item-inner">
                <text class="required-icon font-msyhl">*</text>
                <text class="item-text font-msyhl">收货人姓名</text>
            </div>

            <div class="addr-item-input">
                <input return-key-type="done" v-model="userName" maxlength="30" class="input font-msyhl" type="text" placeholder="请输入姓名"></input>
            </div>
        </div>

        <div class="addr-item">
            <div class="addr-item-inner">
                <text class="required-icon font-msyhl">*</text>
                <text class="item-text font-msyhl">电话号码</text>
            </div>

            <div class="addr-item-input">
                <input return-key-type="done" v-model="phone" maxlength="11" class="input font-msyhl" type="tel" placeholder="请输入11位手机号码"></input>
            </div>
        </div>

        <div class="addr-item">
            <div class="addr-item-inner">
                <text class="required-icon font-msyhl">*</text>
                <text class="item-text font-msyhl">所在区域</text>
            </div>

            <div class="addr-item-input">
                <input v-model="areaName" disabled="true" class="input font-msyhl" type="text" placeholder="省 市 区"></input>
                <btn-pre @btnClick="getCity">请选择</btn-pre>
            </div>
        </div>

        <div class="addr-item">
            <div class="addr-item-inner">
                <text class="required-icon font-msyhl">*</text>
                <text class="item-text font-msyhl">详细地址</text>
            </div>

            <div class="addr-item-input">
                <input return-key-type="done" v-model="detailAddress" maxlength="60" class="input font-msyhl" type="text" placeholder="街道 楼牌号等（限60字）"></input>
            </div>
        </div>

        <!--<div class="addr-item">-->
            <!--<text class="item-text font-msyhl">小区名称</text>-->

            <!--<div class="addr-item-input">-->
                <!--<input return-key-type="done" maxlength="20" v-model="cellName" class="input font-msyhl" type="text" placeholder="仅购买景徽菜篮子商品需填写（限20字）"></input>-->
            <!--</div>-->
        <!--</div>-->

        <!--错误提示-->
        <text v-if="errorTip" class="error-tip font-msyhl">{{errorTip}}</text>
    </div>

    <div class="footer">
        <div class="footer-left" @click="setDefault">
            <image resize="stretch" class="default-icon" :src="isDefault ? checkedIconBg : uncheckedIconBg"></image>
            <text class="default-text font-msyhl">设置为默认地址</text>
        </div>

        <btn-item @btnClick="saveAddress">保存</btn-item>
    </div>

    <!--省市区-->
    <city-wheel :prov="prov" :city="city" :area="area" :cityShow="cityShow" @getCityArea="getCityArea"></city-wheel>
</div>